<template>
  <page-wrap
    :show-top="showTop"
    stay-still
    back
    hide-tab
    :dark="false"
    txtcolor="#fff"
    title="绑定信息"
    :bg-color="uNavColor"
  >
    <view class="container">
      <view class="form-box">
        <u-form ref="uForm" :model="form" label-width="110">
          <u-form-item label="用户名" prop="personName">
            <u-input placeholder="请输入用户名" v-model="form.personName" />
          </u-form-item>
          <!-- <u-form-item label="学号" prop="stuNum">
            <u-input placeholder="请输入学号" v-model="form.stuNum" />
          </u-form-item> -->
          <!-- <u-form-item label="手机号" prop="telephone">
            <u-input placeholder="请输入手机号" v-model="form.telephone" />
          </u-form-item> -->
        </u-form>
      </view>
      <view style="margin: 32px 16px">
        <u-button shape="circle" type="primary" @click="onSubmit"
          >提 交</u-button
        >
      </view>
      <view class="tips">
        <section class="tips-line">
          <view class="dot">·</view>
          注：个人信息影响后续服务与活动参与，请务必确认信息正确且完整
        </section>
        <section class="tips-line">
          <view class="dot">·</view>
          如使用时遇到问题，可通过卡面上联系方式或线下服务人员联系我们
        </section>
      </view>
    </view>
  </page-wrap>
</template>

<script>
import { infoEdit, getUserInfo } from "@/api/modules/career";
import { getPersonDetail } from "@/api/index";
export default {
  emits: ["updateBindStatus"],
  data() {
    return {
      uNavColor: this.$uNavColor,
      personId: uni.getStorageSync("person-id").slice(2) || undefined,
      form: {
        cardNo: "",
        cardKey: "",
        personName: "",
        stuNum: "",
        telephone: "",
      },
      rules: {
        personName: [
          { required: true, message: "请输姓名", trigger: ["change", "blur"] },
        ],
        stuNum: [
          {
            required: false,
            message: "请输入学号",
            trigger: ["change", "blur"],
          },
        ],
        telephone: [
          {
            required: false,
            message: "请输入手机号",
            trigger: ["change", "blur"],
          },
        ],
      },
      inputStyle: {
        height: "40rpx",
      },
      showTop: false,
      targetPath: "",
    };
  },
  onReady() {
    this.$refs.uForm.setRules(this.rules);
  },
  onLoad(opt) {
    // targetPath 是跳转回去的页面，如果没有传过来，就跳转到职途主页
    this.targetPath = opt.targetPath || "";
  },
  created() {
    this.getPersonDetailFn();
  },
  onPageScroll(res) {
    this.showTop = res.scrollTop > 0;
  },
  methods: {
    getPersonDetailFn() {
      let params = {
        param: JSON.stringify({
          personId: uni.getStorageSync("person-id").slice(2) || "",
        }),
        where: "",
        slaveInfo: 1,
      };
      getPersonDetail(params).then((res) => {
        if (res.code == 200) {
          this.form.telephone = res.data.shouji;
        }
      });
    },
    onSubmit() {
      const userInfo = getApp().globalData.userInfo;
      const defaultAvatar = this.$imgBase + "common/avatar_default.png";
      this.$refs.uForm.validate(async (valid) => {
        if (valid) {
          try {
            const params1 = {
              personName: this.form.personName,
              stuNum: this.form.stuNum,
              // telephone: this.form.telephone,
              photo: userInfo.pic || defaultAvatar,
            };
            const res1 = await infoEdit(params1);
            if (res1.code == 200) {
              this.$bus.$emit("updateBindStatus");
              if (this.targetPath) {
                uni.redirectTo({
                  url: `${this.targetPath}?openPopup=true`,
                });
              } else {
                this.getUserInfoFn();
              }
            } else {
              uni.showToast({
                icon: "none",
                title: res1.status_desc,
                duration: 1000,
              });
            }
          } catch (err) {
            uni.showToast({ icon: "none", title: err.message, duration: 1000 });
          }
        }
      });
    },
    getUserInfoFn() {
      // 这个uid一定要传，因为在interceptors中，没有传参的请求的请求头不会带上uid，而这个请求一定要uid
      getUserInfo({ uid: "" }).then((res) => {
        if (res.code == 200) {
          if (res.data.cardVersion == 1) {
            uni.redirectTo({
              url: "/pagesSub/userCenter/careerPath/index",
            });
          } else {
            uni.redirectTo({
              url: "/pagesSub/userCenter/careerPathV2/index",
            });
          }
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  height: 100vh;
  background: #fff;
}
.form-box {
  margin: 32px;
}
.tips {
  padding: 32rpx;
  color: #888;
  &-line {
    display: flex;
    padding-bottom: 12rpx;
    .dot {
      width: 28rpx;
      height: 28rpx;
      margin-right: 16rpx;
    }
  }
}
</style>
